/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
<div class="area-planmanu" style="border:0px solid green;">
  <div class="mask" v-if="maskVisible" @click ="clickMask"></div>
  <Messagebox :visible="deleteDiologVisible" :text="`${$t('openatc.greenwaveoptimize.isdelete')}${chooseName} ?`" @cancle="closeDeleteDialog" @ok="handleDelete"/>
  <el-menu @select="selectPlan" v-loading="loading" style="border:0px solid yellow;">
    <el-menu-item :index="String(plan.id)" v-for="(plan, index) in planData" :key="index">
        <span slot="title">{{plan.name}}</span>
    </el-menu-item>
  </el-menu>
  <div style="position:relative;border:0px solid red;width:100%;height:40px;">
    <div style="position:absolute;left:5px;top:5px;">
      <el-button type="text" icon="el-icon-delete" size="medium" @click="onDelete">{{$t('openatc.common.delete')}}</el-button>
    </div>
  </div>
</div>
</template>

<script>
import AreaApi from '../../api/area'
import Messagebox from '../../components/MessageBox/index.vue'
import { getMessageByCode } from '../../utils/responseMessage'
export default {
  name: 'AreaPlanMenu',
  components: {
    Messagebox
  },
  props: {
    areaId: {
      type: Number
    },
    planData: {
      type: Array
    },
    zIndexObj: {
      type: Object
    },
    loading: {
      type: Boolean
    }
  },
  watch: {
    planData: {
      handler: function (val) {
        if (this.chooseId) {
          this.chooseName = this.planData.filter(ele => ele.id === this.chooseId)[0].name
        }
        if (val && !val.length) {
          this.maskVisible = true
        }
      },
      deep: true
    },
    maskVisible: {
      handler: function (val) {
        this.$emit('maskChange', val)
      },
      deep: true
    },
    addDialogVisible: {
      handler: function (val) {
        this.$emit('maskChange', val)
      },
      deep: true
    }
  },
  data () {
    return {
      chooseId: 0, // 选中的计划id
      chooseName: '', // 选中的计划name
      deleteDiologVisible: false,
      maskVisible: false, // 引导遮罩层是否显示
      addNum: 0,
      addDialogVisible: false, // 新增弹窗是否显示
      isEdit: false
    }
  },
  methods: {
    selectPlan (id) {
      // 选择某一方案
      this.chooseId = Number(id)
      this.chooseName = this.planData.filter(ele => ele.id === this.chooseId)[0].name
      this.$emit('chooseRoute', this.chooseId)
      this.$emit('maskChange', this.maskVisible)
      this.$emit('resetContentComponent')
    },
    onDelete () {
      if (!this.chooseId) {
        this.$message({
          message: this.$t('openatc.greenwaveoptimize.nochooseplan'),
          type: 'warning'
        })
        return
      }
      this.deleteDiologVisible = true
    },
    handleDelete () {
      let idList = this.planData.map(item => item.id)
      idList = idList.filter(item => item !== this.chooseId)
      let reqData = {
        id: this.areaId,
        list: idList
      }
      AreaApi.updateAreaRoutes(reqData).then(res => {
        if (!res.data.success) {
          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          return
        }
        this.deleteDiologVisible = false
        let index = 0
        for (let i = 0; i < this.planData.length; i++) {
          let plan = this.planData[i]
          if (plan.id === this.chooseId) {
            index = i
            break
          }
        }
        this.planData.splice(index, 1)
        this.resetChooseId()
        this.$message({
          message: this.$t('openatc.common.deletesuccess'),
          type: 'success',
          duration: 1 * 1000,
          onClose: () => {
            this.$emit('refresh')
          }
        })
      })
    },
    resetChooseId () {
      // 重置为未选择状态
      this.chooseId = 0
      this.$emit('chooseRoute', this.chooseId)
    },
    closeDeleteDialog () {
      this.deleteDiologVisible = false
    },
    clickMask () {
      // 点击其他地方关闭蒙层
      this.maskVisible = false
    },
    switchOperate (command) {
      switch (command) {
        case 'Delete':
          this.onDelete()
          break
        default:
          console.log(command)
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
//  @import "../../styles/theme/element-variables.scss";
// .el-menu {
//   height: calc(100vh - 250px);
//   max-height: calc(100vh - 250px);
//   overflow-y: auto;
//   border-right: none;
// }
</style>
